<script>
let isFocused = false;

function handleFocus() {
  isFocused = true;
}

function handleBlur() {
  isFocused = false;
}
</script>

<div class="page-search" style="background:{isFocused?'var(--app-theme-opacity10)':''}">
    <iconify-icon icon="icon-park-solid:search" class="icon" style="color: {isFocused?'var(--app-primary)':''};"></iconify-icon>
    <input type="text" placeholder="搜索扩展程序和主题" on:focus={handleFocus} on:blur={handleBlur}>
</div>
<style lang="less">
    .page-search{
        flex: 1;
        background: #f2f2f2;
        height: 36px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        border-radius: var(--app-radius);
        transition: all .4s;
        min-width: 220px;
        .icon{
            transition: all 0.8s;
        }
        input{
            flex: 1;
            background: none;
            outline: none;
            border: none;
            margin-left: 15px;
            width: 0;
        }
    }

    @media (max-width: 768px) {
        .page-search{
            min-width: 0;
        }
    }

    
</style>